﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<!-- 留言板页面 -->
<head>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<!-- 引用头部样式 -->
	<jsp:include page="header.jsp"></jsp:include>

	<div>
		<header class="header-article-list">
			<h1>在线留言</h1>
		</header>
		<div>
			<!-- 表单开始 -->
			<form class="layui-form message-form" id="addForm">
				<div class="layui-form-item">
					<label class="layui-form-label">姓名</label>
					<div class="layui-input-inline">
						<input type="text" style="margin-top: 35px" name="name" required
							lay-verify="required" placeholder="请输入" autocomplete="off"
							class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">电话</label>
					<div class="layui-input-inline">
						<input type="text" style="margin-top: 35px" name="tel" required placeholder="请输入10位有效数字"
							autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">邮箱</label>
					<div class="layui-input-inline">
						<input type="text" style="margin-top: 35px" name="email" required
							lay-verify="required|email" placeholder="请输入邮箱密码"
							autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">内容</label>
					<div class="layui-input-inline">
						<textarea name="content" style="margin-top: 35px" required
							lay-verify="required" placeholder="请输入内容" class="layui-textarea"></textarea>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<button type="button" class="layui-btn" lay-submit
							lay-filter="subBtnAdd">立即提交</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
			</form>
			<!-- 表单开始end -->
		</div>
	</div>

	<!-- 引用底部样式 -->
	<jsp:include page="footer.jsp"></jsp:include>

	<!-- 脚本开始 -->
	<script>
		  layui.use('form', function() {
			var form = layui.form;
			var $ = layui.$;

			//表单提交
			form.on('submit(subBtnAdd)', function(data) {
				var url = "HomeServlet?method=toMessage";//请求地址
				var str = $("#addForm").serialize();//请求参数,表单中的数据,serialize序列化
				console.log(str);// 名=值&名=值
				//ajax请求服务器,判断结果
				$.post(url, str, function(res) {
				    console.log(res);
				    layer.closeAll();
				    if(res){
				    	layer.alert('添加成功',{icon: 1});
				    	 }else{
				    	layer.alert('添加失败',{icon: 1});
				    }
				}, "html")
				return false;
			}); 
		});
	</script>
	<!-- 脚本结束end -->
</body>
</html>